import { useEffect } from 'react'
import { useState, lazy } from 'react'
import { useParams } from 'react-router-dom'

const homeLayer = 'HomeA01'

const Outlet = ({ pad, homeKey, router }) => {
    const { page } = useParams()
    const { BackTop, BackBtm, BackAbo } = pad
    const [LayerPage, setLayerPage] = useState()

    useEffect(() => {
        // 判断模块和组件的加载逻辑
        if (page === homeKey) {
            const Layer = lazy(() => import(`./Layer/${homeLayer}.jsx`))
            setLayerPage(Layer)
        } else {
            setLayerPage()
        }
    }, [page])

    return (
        <div className='Outlet' style={{ padding: `${BackTop}px ${BackAbo}px ${BackBtm}px ${BackAbo}px` }}>
            {LayerPage &&
                <div className='Layer'>
                    <LayerPage router={router} />
                </div>
            }
            <div className='Template'>
                组件
            </div>

            {/* 页面数据切换 {page} */}
            {/* {homeKey === page &&
                <div>首页</div>
            } */}
        </div>
    )
}

export default Outlet